<template>
  <div class="toast">
    <b-toast content="我有一个前凸后翘的女朋友" ref="toast" top="200px" />
    <div class="box">
      <b-button type="primary" @click="primaryClick">默认消息</b-button>
      <b-button type="info" @click="infoClick">显示信息提示</b-button>
      <b-button type="success" @click="successClick">显示成功提示</b-button>
      <b-button type="warning" @click="warningClick">显示警告提示</b-button>
      <b-button type="error" @click="errorClick">显示错误提示</b-button>
    </div>
    <div class="box">
      <b-button type="primary" @click="timeToast">显示一个10s消息提示</b-button>
    </div>
  </div>
</template>
<script>
export default {
  name: "Toast",
  methods: {
    primaryClick() {
      this.$refs.toast.show();
    },
    infoClick() {
      this.$Toast.info("这是一个普通提示");
    },
    successClick() {
      this.$Toast.success("这是一个成功提示");
    },
    warningClick() {
      this.$Toast.warning("这是一个警告提示");
    },
    errorClick() {
      this.$Toast.error("这是一个错误提示");
    },
    timeToast(){
      this.$Toast.info("这是一个10s消息提示",10);  
    }
  },
};
</script>
<style scoped>
.box {
  padding: 100px 0px;
}
.box button {
  margin-right: 20px;
  margin-top: 20px;
}
</style>